<template>
  <el-dialog
    :model-value="dialogFormVisible"
    :title="title"
    align-center
    draggable
    width="32%"
    style="border-radius: 10px; padding: 5px 10px"
  >
    <el-form :model="form" label-width="120px" :rules="rules">
      <el-form-item label="岗位名称">
        <el-input v-model="form.position" style="width: 250px" />
      </el-form-item>
      <el-form-item label="岗位类型" >
        <el-select style="width: 250px" 
          v-model="form.positionType"
          placeholder="请选择岗位类型"
          @change="deptResponse($event)"
        >
          <el-option
            v-for="item in positionType"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            
          </el-option>
        </el-select>
      </el-form-item>
	  {{ form.type }}
      <el-form-item label="绩效挂钩" >
        <el-select style="width: 250px" 
          v-model="form.kind"
          placeholder="请选择绩效挂钩"
        >
          <el-option
            v-for="item in kind"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            {{ item.name }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属部门"  >
        <el-tree-select 
          style="width: 250px"
          v-model="form.deptId"
          :data="deptOption"
          placeholder="所属部门"
          clearable
          node-key="id"
          :props="{ value: 'id', label: 'deptName' }"
        />
      </el-form-item>
      <el-form-item label="是否启用">
        <el-switch v-model="form.state" />
      </el-form-item>
      <el-form-item label="备注说明" class="ins">
        <el-input v-model="form.ins" type="textarea" style="width: 250px" class="ins" />
      </el-form-item>
      <el-form-item>
        <el-button style="width: 100px" type="primary" @click="onSubmit"
          >确定</el-button
        >
        <el-button style="width: 100px" @click="onClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {
  ref,
  onMounted,
  onBeforeMount,
  reactive,
  defineProps,
  defineEmits,
  watch,
} from "vue";
import {
  getThirdUnitList,
  getFourthUnitList,
  getEmployeeList,
  addPosition,
} from "@/api/api";
import { getDeptTree,getAllDept } from "@/api/deptApi";
import { updatePosition } from "@/api/position";
import { ElMessage } from "element-plus";

const form = reactive({
  id:"",
  position: "",
  deptId: "",
  positionType: "",
  type:"",
  kind:"",
  state: true,
  ins: "",
  auditStatus: 0,
});

const dialogFormVisible = ref(false);
const props = defineProps({
  dialogFormVisible: {
    type: Boolean,
    required: true,
  },
  close: {
    type: Function,
    default: () => {},
  },
  update: {
    type: Function,
    default: () => {},
  },
  editForm: {
    type: Object,
    required: true,
  },
  type: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
});

watch(props, (newValue, oldValue) => {
	
    form.id = newValue.editForm.id;
    form.positionType = newValue.editForm.positionType;
    form.type = newValue.editForm.type;
    form.typeName = newValue.editForm.typeName;
    form.kind=newValue.editForm.kind;
    form.position = newValue.editForm.position;
    form.deptId = newValue.editForm.deptId;
    form.state = newValue.editForm.state==1?true:false;
    form.ins=newValue.editForm.ins;
    deptOption.value=[]
    getAllDept().then(data=>{
      for (let i = 0; i < data.length; i++) {
        deptOption.value.push({
          deptName: data[i].deptName,
          id: String(data[i].id)
        })
    }
    })
});

const positionType = ref([
  { id: 5, name: "普通员工岗" },
  { id: 4, name: "四级CEO岗" },
  { id: 3, name: "三级CEO岗" },
  { id: 2, name: "二级CEO岗" },
  { id: 1, name: "一级单元岗" },
]);

const kind = ref([
  { id: 0, name: "管理类" },
  { id: 3, name: "绩效与业绩挂钩" },
  { id: 2, name: "绩效与服务挂钩" },
  { id: 1, name: "绩效与工作量挂钩" },
]);

onBeforeMount(() => {
  
});

const deptOption = ref([]);
const deptResponse=(type)=>{
  deptOption.value=[]
  getDeptTree(type).then((data) => {
    deptOption.value=data
  });
}


const onSubmit = () => {
  
  if (props.type == "add") {
    addPosition(form).then((data) => {
      if (data.code == 200) {
        ElMessage({
          message: "新增成功",
          type: "success",
        });
        props.close();
        props.update();
      } 
      else {
        ElMessage.error("新增失败");
      }
    });
  } 
  else if (props.type == "edit") {
    form.type = form.positionType
    updatePosition(form).then((data) => {
      if (data.code == 200) {
        ElMessage({
          message: "编辑成功",
          type: "success",
        });
        props.close();
        props.update();
      } else {
        ElMessage.error("编辑失败");
      }
    });
  }
  else{
    props.close();
    props.update();
  }
};

const onClose = () => {
  props.close();
};
</script>
<style lang="scss" scoped >
::v-deep .el-form-item__label:before {
  content: "* ";
  color: red;
}
.ins {
  ::v-deep .el-form-item__label:before {
    content: " ";
  }
}
</style>